<template>
    <div class='imgPreview'>
        <!-- 图片预览 -->
        <div id="imgPrive" v-if="showPreview">
            <div :key="index" class="imgPrive-b" v-for="(src,index) in imgList">
                <img :src="src" @click="seeImg" width="300" />
            </div>
        </div>
    </div>
</template>
<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css'
export default {
    props:{
        showPreview:{
            type:Boolean,
            default:false
        },
        imgList:{
            type:Array,
            default:[]
        }
    },
    data() {
        return {
        }
    },
    created() {
    },
    watch:{
        showPreview(val) {
            if(val){
               if(this.imgList.length == 0 ){
                   this.$vmNews('暂无图片！');
                   this.closePreview();
                   return;
               }
                this.$nextTick(() => {
                    this.openImgPreview();
                })
            }
           
        },
    },
    components: {
    },
    methods: {
        // 关闭预览
        closePreview(){
            this.$emit('update:showPreview', false)
        },
        // 打开图片预览
        openImgPreview(imgUrl) {
            let imgPrive = document.getElementById('imgPrive').getElementsByTagName('img')[0];
            imgPrive.click();
        },
        // 查看图片
        seeImg(){
            let that = this;
            var viewer = new Viewer(document.getElementById('imgPrive'), {
                'mode': true,
                'button':true, //右上角按钮
                "navbar": true, //底部缩略图
                "title": true, //当前图片标题
                "toolbar": true, //底部工具栏
                "tooltip": true, //显示缩放百分比
                "zoomable": true, //是否可以缩放
                "rotatable": true, //是否可旋转
                "scalable": true, //是否可翻转
                "transition": true, //使用 CSS3 过度
                "fullscreen": true, //播放时是否全屏
                "keyboard": true, //是否支持键盘
                shown() {
                
                },
                hidden(){
                    that.closePreview();
                }
             });    
        },
    },
}
</script>
<style scoped lang='scss'>
.imgPreview{
    #imgPrive {
        position: fixed;
        left: -999px;
        top: -999px;
    }
}
</style>